<template>
  <div>
    <WrapperIf :wrap-if="wrap" :tag="tag">
      <a :href="link" slot="content">
        content
      </a>
      <template #content>
        content
      </template>
    </WrapperIf>

    <div>
      Change wrapper type:
      <select v-model="tag">
        <option v-for="tag in tagList">{{ tag }}</option>
      </select>
    </div>
    <button @click="wrap = !wrap">Toggle wrapper</button>
  </div>
</template>
<script>
import WrapperIf from './WrapperIf.vue';

export default {
  data() {
    return {
      link: 'https://example.com',
      tagList: ['p', 'label'],
      tag: 'label',
      wrap: true
    }
  },
  components: {
    WrapperIf
  }
}
//https://stackoverflow.com/questions/54190569/nesting-a-slot-in-a-slot-for-vue
</script>
<style lang="">

</style>